<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //等待页面所有资源加载完毕,就回去执行回调函数
        // window.addEventListener('load',function(){
        //     const btn=document.querySelector('button');
        //     btn.addEventListener('click',function(){
        //         alert(11);
        //     })
        // })

        // DOMContentLoaded  给document加

    </script>
</head>
<body>
    <!-- 
        页面加载事件:
     -->
     <!-- 
        页面滚动事件
            滚动条在滚动的时候持续触发的事件
                很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如固定导航栏,比如返回顶部
            事件名:
                scroll  页面滚动事件  
                window.addEventListener('scroll',function(){
                    console.log(document.documentElement.scrollTop)
                })
                获取位置 scrollLeft和scrollTop(属性)
                const div=document.querySelector('div');
                div.addEventListener('scroll',function(){
                    //scrollTop 被卷去的头部
                    console.log(div.scrollTop)
                })

                scrollTop是可赋值类型的
                    document.documentElement.scrollTop=800  注意不带单位
        
        浏览器窗口大小发生变化的时候触发的事件
        window.addEventListener('resize',function(){
            console.log(1);
        })


        元素的尺寸与位置
            获取宽高:
                获取元素的自身宽高,包含元素自身设置的宽高,padding,border
                offsetWidth和offsetHeight
            获取位置:
                获取元素距离自己定位父级元素的左,上距离
                offsetLeft和offsetTop 注意是只读属性

      -->
     <button>点击了 </button>
</body>
</html>